<template>
	<div class="oauth-login">
		<div class="widget " :class="open?'active':''">
			<div class="menu">
				<div class="toggle" @click="open=!open">
					<i class="toggle-i"></i>
					<i class="toggle-i"></i>
				</div>
				<ul class="list">
					<li @click="login('qq')"></li>
					<li @click="login('alipay')"></li>
					<li @click="login('weibo')"></li>
					<li @click="login('github')"></li>
					<li @click="login('gitee')"></li>
					<li @click="login('alipay')"></li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { oauth2login } from '@/api/user';
import { setOAuthLoginBackUrl } from '@/common/js/auth.js';

export default {
	name: 'OAuthLogin',
	props: {
		title: {
			type: String,
			default: '怡人'
		}
	},
	components: {},
	data() {
		return {
			open:false,
			options: {}
		};
	},
	created() {
	},
	methods: {
		login(type) {
			setOAuthLoginBackUrl(window.location.href);
			oauth2login(type);
		}
	}
};
</script>

<style scoped="scoped" lang="stylus">
.oauth-login
	padding 10px
	position relative
	height 80px
	width 100%

.widget
	width 100%
	display flex
	justify-content center
	border-radius 10px
.widget.active .menu
	width 344px
.widget.active .menu .toggle
	right 296px
.widget.active .menu .toggle i
	width 8px
	transition width 400ms cubic-bezier(0.6, 0, 0.45, 0.99), transform 1000ms cubic-bezier(0.6, 0, 0.45, 0.99) 300ms, top 200ms cubic-bezier(0.6, 0, 0.45, 0.99) 200ms, bottom 200ms cubic-bezier(0.6, 0, 0.45, 0.99) 200ms
.widget.active .menu .toggle i:first-of-type
	top 19px
	transform rotate(45deg) translate(-1px, -2px)
.widget.active .menu .toggle i:last-of-type
	bottom 19px
	transform rotate(-45deg) translate(-1px, 2px)
.widget.active .menu .list
	visibility visible
	flex-direction row-reverse
.widget.active .menu .list li
	transform scale(1)
	img
		height 40px
		width 40px
.widget .menu
	width 56px
	height 56px
	display flex
	align-items center
	justify-content center
	position absolute
	border-radius 100px
	background-color #f7f7f7
	box-shadow 0px 10px 30px -15px rgba(0, 0, 0, 0.7)
	transition 650ms cubic-bezier(0.79, 0, 0.22, 1)
.widget .menu::before
	content '------------ 登录'
	display flex
	justify-content flex-end
	align-items center
	padding-right 20px
	height 100px
	width 150px
	position absolute
	left -150px
	top 50%
	transform translateY(-50%)
.widget .menu::after
	content 'LOGIN ------------'
	display flex
	justify-content flex-start
	align-items center
	padding-left 20px
	height 100px
	width 150px
	position absolute
	right -150px
	top 50%
	transform translateY(-50%)
.widget .menu .toggle
	width 40px
	height 40px
	right 8px
	display flex
	align-items center
	justify-content center
	flex-direction column
	position absolute
	border-radius 100px
	cursor pointer
	z-index 100
	background-color #a6d595
	transition 600ms cubic-bezier(0.79, 0, 0.22, 1)
.widget .menu .toggle:hover 
	background-color #a6d595
.widget .menu .toggle:hover .toggle-i
	background-color #fff
.widget .menu .toggle i
	color #ccc
	width 12px
	height 2px
	position absolute
	display flex
	border-radius 100px
	background-color #fff
	transition width 400ms cubic-bezier(0.6, 0, 0.45, 0.99), transform 600ms cubic-bezier(0.6, 0, 0.45, 0.99), top 600ms cubic-bezier(0.6, 0, 0.45, 0.99) 600ms, bottom 600ms cubic-bezier(0.6, 0, 0.45, 0.99) 600ms
.widget .menu .toggle i:first-of-type
	top 16px
.widget .menu .toggle i:last-of-type
	bottom 16px
.widget .menu .list
	flex-direction row
	margin 0
	right 8px
	display flex
	align-items center
	justify-content center
	visibility hidden
	position absolute
	
.widget .menu .list li
	width 40px
	height 40px
	margin-left 8px
	list-style none
	background-color #fff
	border-radius 100px
	background-size 100% 100%
	background-repeat no-repeat
	background-position center
	transform scale(0)
	transition 300ms cubic-bezier(0.37, 0.01, 0.43, 1.3)
	transition-delay 300ms
	cursor pointer
	opacity 0.75
.widget .menu .list li:nth-child(1)
	background-image url(../../common/img/user_center/qq_cur.png)
	transition-delay 50ms
.widget .menu .list li:nth-child(2)
	background-image url(../../common/img/user_center/wechat_cur.png)
	transition-delay 100ms
.widget .menu .list li:nth-child(3)
	background-image url(../../common/img/user_center/weibo_cur.png)
	transition-delay 150ms
.widget .menu .list li:nth-child(4)
	background-image url(../../common/img/user_center/github.png)
	transition-delay 200ms
.widget .menu .list li:nth-child(5)
	background-image url(../../common/img/user_center/gitee_cur.png)
	transition-delay 250ms
.widget .menu .list li:nth-child(6)
	background-image url(../../common/img/user_center/zfb_cur.png)
	transition-delay 300ms
</style>
